自定义View（5） -- 评分控件RatingBar

发表于 | 分类于 | | 阅读数 次
字数统计: 1,331字 | 阅读时长 ≈ 6分钟

先看效果图:
评分.gif
在我们画这个控件之前，我们想想一下怎么实现这个，显示对星星的处理，我们是自己绘制还是使用图片？其实都是可以的，但是我们为了更加快速的完成这个，我们选择了使用图片来完成。先自定义属性，在这个例子中我定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RatingBar">
        <!--未选中引用-->
        <attr name="starNormal" format="reference" />
        <!--选中引用-->
        <attr name="starFocus" format="reference" />
        <!--最大的分数-->
        <attr name="gradeNumber" format="integer" />
        <!--当前的分数-->
        <attr name="currentGrade" format="integer" />
        <!--星星之间的间距-->
        <attr name="statPadding" format="dimension" />
    </declare-styleable>
</resources>

我们在初始化的时候获取相关数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 private Bitmap mStarFocusBitmap, mStarNormalBitmap;
    private int mGradeNumber;//最大分数
    private int mCurrentGrade;//当前分数  1开始的  最少为1分
    private int mStarPadding;//间距

    public RatingBar(Context context) {
        this(context, null);
    }

    public RatingBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RatingBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);


        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
        int starNormalId = array.getResourceId(R.styleable.RatingBar_starNormal, 0);
        if (starNormalId == 0) {
            throw new RuntimeException("请设置属性 starNormal ");
        }

        mStarNormalBitmap = BitmapFactory.decodeResource(getResources(), starNormalId);

        int starFocusId = array.getResourceId(R.styleable.RatingBar_starFocus, 0);
        if (starFocusId == 0) {
            throw new RuntimeException("请设置属性 starFocus ");
        }

        mStarFocusBitmap = BitmapFactory.decodeResource(getResources(), starFocusId);
        mGradeNumber = array.getInt(R.styleable.RatingBar_gradeNumber, 0);
        mStarPadding = array.getDimensionPixelOffset(R.styleable.RatingBar_statPadding, DisplayUtil.dip2px(context, 5));
        mCurrentGrade = array.getInt(R.styleable.RatingBar_currentGrade, 1);

        array.recycle();
    }
}

接下来我们设置宽高，本例中就直接写了，在实际开发中如有需要在修改

1
2
3
4
5
6
7
8
9
10
@Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
      // 高度  一张图片的高度
      int height = mStarFocusBitmap.getHeight() + getPaddingTop() + getPaddingBottom();
      int width = mStarFocusBitmap.getWidth() * mGradeNumber
              + getPaddingLeft() + getPaddingRight()
              + mStarPadding * (mGradeNumber - 1);
      setMeasuredDimension(width, height);
  }

接下来调用onDraw函数绘制:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for (int i = 0; i < mGradeNumber; i++) {
            if (i < mCurrentGrade) {
                canvas.drawBitmap(mStarFocusBitmap,
                        getPaddingLeft() + i * mStarFocusBitmap.getWidth() + i * mStarPadding, getPaddingTop(), null);
            } else {
                canvas.drawBitmap(mStarNormalBitmap,
                        getPaddingLeft() + i * mStarFocusBitmap.getWidth() + i * mStarPadding, getPaddingTop(), null);
            }
        }
    }

我们进行测试:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >


    <com.zzw.customview.view.RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:currentGrade="2"
        app:gradeNumber="5"
        app:statPadding="10dp"
        app:starFocus="@mipmap/star_selected"
        app:starNormal="@mipmap/star_normal"
        />


</RelativeLayout>

效果图如下：

这时候只是一个静态的，点击的时候并没有变化，我们接下来进行onTouchEvent监听，然后进行改变值重绘:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                //计算下标
               int pos = (int) (x / (mStarFocusBitmap.getWidth() + mStarPadding));
              if (pos < 0) pos = 0;
              if (pos >= mGradeNumber)  pos = mGradeNumber - 1;
                mCurrentGrade = pos + 1;
                invalidate();
                break;
        }
        return true;
    }

我们为什么要加1呢？因为我们mCurrentGrade表示的是评分的分数，所以用下标加1，这个时候我们效果就达到了，但是我们不要忘记优化。
因为我们返回了true,所以在滑动的时候一直接受到move的事件，就一直进行调用了invalidate重绘 ，我们上次也说过invalidate会做很多事情，所以我们就要减少重绘的此时，我们应该加上判断：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                //计算下标
              int pos = (int) (x / (mStarFocusBitmap.getWidth() + mStarPadding));
              if (pos < 0) pos = 0;
              if (pos >= mGradeNumber)  pos = mGradeNumber - 1;
              if (pos != mCurrentGrade - 1) {//分数-1 等于 坐标pos
                    mCurrentGrade = pos + 1;
                    invalidate();
                }
                break;
        }
        return true;
    }

这样的画就优雅了很多，当然也不要忘记bitmap的回收，我们将暴露出函数来给使用者在activity的onDestory生命周期调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
     * 回收
     */
    public void recycle() {
        if (mStarFocusBitmap != null)
            mStarFocusBitmap.recycle();

        if (mStarNormalBitmap != null)
            mStarNormalBitmap.recycle();

        mStarFocusBitmap=null;
        mStarNormalBitmap=null;
    }

在activity里面调用:

1
2
3
4
5
@Override
   protected void onDestroy() {
       super.onDestroy();
       mRatingBar.recycle();
   }

这样的话对于强迫症患者心里就舒坦多了。当然，我也是一个强迫症换患者。但是有时候我们也不能一定要追求极致，比如在获取位置的时候，我有一个想法，就是根据星星的范围精确的获取当前的位置,比如下面这样:


当时我就写了一个小算法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
   * 计算位置
   *
   * @param x
   * @return
   */
  private int comPos(float x) {

      int startX = getPaddingLeft();
      if (x < startX) {
          return 0;
      }

      if (x > getWidth() - getPaddingRight()) {
          return mGradeNumber;
      }

      int pos = 0;
      for (int i = 0; i < mGradeNumber; i++) {
          int endX;
          if (i == 0 || i == mGradeNumber - 1) {//第0个位置的后面的x
              endX = startX + mStarFocusBitmap.getWidth() + mStarPadding / 2;
          } else {
              endX = startX + mStarFocusBitmap.getWidth() + mStarPadding;
          }
          if (x < endX) {
              pos = i;
              break;
          }
          startX = endX;
      }
      return pos;
  }

这样的画就能够准确的拿到星星的位置，但是这样的弊端就是一个for循环，将会耗费更多的时间，所以最后还是改为了一个模糊的计算位置的方式。所以有时候也不能太强迫自己，不要钻牛角尖。
这篇文章结束了，希望对大家有所帮助!

下载链接:https://github.com/ChinaZeng/CustomView

-------------The End-------------